<template>
  <div class="dashboard-container">
    <el-container style="float:left">
      <el-card class="box-card">
        <el-divider content-position="left">头像上传</el-divider>
        <!-- 上传头像 -->
        <div>
          <avatar />
        </div>
        <el-divider />
      </el-card>
    </el-container>
    <el-container style="float:left; margin-left:20px; height:325px;">
      <el-card class="box-card" style="width:760px; padding:15px; padding-top: 50px">
        <el-descriptions title="管理员信息">
          <el-descriptions-item label="姓名">{{ name }}</el-descriptions-item>
          <el-descriptions-item label="管理员名称">{{ adminName }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ phone }}</el-descriptions-item>
          <el-descriptions-item label="身份证号码">{{ idCard }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-container>
  </div>
</template>

<script>
import avatar from './avatar.vue'
export default {
  name: 'Dashboard',
  components: { avatar },
  data() {
    return {
      adminName: '',
      idCard: '',
      name: '',
      phone: ''
    }
  },
  mounted: function() {
    this.info()
  },
  methods: {
    edit() {
      this.loading = true
      this.$store.dispatch('admin/edit', this.editForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    info() {
      var admin = JSON.parse(localStorage.getItem('admin'))
      if (admin.adminName === '') {
        admin.username = '未填管理员名称'
      }
      if (admin.idCard === '' || admin.idCard === null) {
        admin.email = '未填身份证号码'
      }
      if (admin.phone === '') {
        admin.phone = '未填手机号'
      }
      if (admin.name === '') {
        admin.name = '未填姓名'
      }
      this.adminName = admin.adminName
      this.idCard = admin.idCard
      this.phone = admin.phone
      this.name = admin.name
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
 .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
